<template>
  <div class="market-page min-h-screen relative">
    <!-- TopBar 导航栏 -->
    <TopBar />

    <!-- 内容区域 -->
    <div class="relative pt-20 pb-12 px-8">
      <div class="max-w-7xl mx-auto">
        <!-- 预测卡片列表 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <PredictionCard 
            v-for="prediction in predictions"
            :key="prediction.indexCode"
            :prediction="prediction"
          />
        </div>

        <!-- 概率分布表 -->
        <div class="mt-12">
          <div class="backdrop-blur-2xl rounded-2xl p-8 shadow-2xl border border-white/10">
            <h2 class="text-2xl font-bold text-white mb-6">
              明日收盘点位区间概率分布
            </h2>
            
            <div class="overflow-x-auto">
              <table class="w-full text-sm">
                <thead>
                  <tr class="border-b border-white/10">
                    <th class="text-left py-3 px-4 text-gray-300 font-semibold">指数</th>
                    <th class="text-center py-3 px-4 text-gray-300 font-semibold">大幅上涨 ≥+2%</th>
                    <th class="text-center py-3 px-4 text-gray-300 font-semibold">小幅上涨 +0~2%</th>
                    <th class="text-center py-3 px-4 text-gray-300 font-semibold">平盘 ±0%</th>
                    <th class="text-center py-3 px-4 text-gray-300 font-semibold">小幅下跌 -0~-2%</th>
                    <th class="text-center py-3 px-4 text-gray-300 font-semibold">大幅下跌 ≤-2%</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="row in probabilityTable" :key="row.index" class="border-b border-white/10 hover:bg-white/5 transition-colors">
                    <td class="py-4 px-4">
                      <span class="font-semibold text-white">{{ row.index }}</span>
                    </td>
                    <td class="text-center py-4 px-4">
                      <span class="text-[#42d392]">{{ row.p1 }}%</span>
                    </td>
                    <td class="text-center py-4 px-4">
                      <span class="text-[#42d392]">{{ row.p2 }}%</span>
                    </td>
                    <td class="text-center py-4 px-4">
                      <span class="text-gray-400">{{ row.p3 }}%</span>
                    </td>
                    <td class="text-center py-4 px-4">
                      <span class="text-[#ff6b6b]">{{ row.p4 }}%</span>
                    </td>
                    <td class="text-center py-4 px-4">
                      <span class="text-[#ff6b6b]">{{ row.p5 }}%</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 说明文字 -->
        <div class="mt-8 text-center text-gray-500 text-sm">
          <p>数据更新时间：{{ lastUpdateTime }} | 预测基于历史波动率与当前市场环境</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TopBar from '@/views/frontend/components/TopBar.vue'
import PredictionCard from './components/PredictionCard.vue'

interface Prediction {
  predictDate: string
  indexCode: string
  indexName: string
  currentPrice: number
  technicalAnalysis: string
  newsAnalysis: string
  keySupport: number
  keyResistance: number
  shortTermTrend: string
  volumeInterpretation: string
  probUpTechnical: number
  probDownTechnical: number
  probUpNews: number
  probDownNews: number
  probUpCombined: number
  probDownCombined: number
  modelName: string
  generatedTime: string
  topNews: Array<{ title: string; score: number }>
}

const lastUpdateTime = ref('2025-11-18 15:53')

const predictions = ref<Prediction[]>([
  {
    predictDate: '2025-11-19',
    indexCode: 'HSTECH',
    indexName: '恒生科技',
    currentPrice: 5635.51,
    technicalAnalysis: '基于最新行情数据的技术分析：关键支撑位：5,614点；关键压力位：5,740点。短线趋势：↓（下跌）。今日收盘跌-2.11%，振幅2.17%，成交量7.02亿单位，显示抛压增强。MACD信号偏弱，RSI(14)处于超卖区间，量能呈现放量下跌，短期技术面偏空。',
    newsAnalysis: '北京时间2025-11-18 00:00至今的重要新闻评估：半导体板块逆势走强，中芯国际、华虹半导体领涨；全球风险偏好回落拖累港股；南向资金持续流入但短期对冲作用有限。半导体利好部分抵消全球避险利空，但外围主导作用更强，消息面偏空。',
    keySupport: 5614,
    keyResistance: 5740,
    shortTermTrend: '↓',
    volumeInterpretation: '成交量7.02亿单位，显示抛压增强，量能呈现放量下跌',
    probUpTechnical: 30.0,
    probDownTechnical: 70.0,
    probUpNews: 40.0,
    probDownNews: 60.0,
    probUpCombined: 35.0,
    probDownCombined: 65.0,
    modelName: 'AI Market Predictor v2.0',
    generatedTime: '2025-11-18 15:53',
    topNews: [
      { title: '半导体板块逆势走强', score: 3 },
      { title: '全球风险偏好回落拖累港股', score: 7 },
      { title: '南向资金持续流入', score: 4 }
    ]
  },
  {
    predictDate: '2025-11-19',
    indexCode: 'IXIC',
    indexName: '纳斯达克',
    currentPrice: 22708.07,
    technicalAnalysis: '基于最新行情数据的技术分析：关键支撑位：22,560点；关键压力位：23,045点。短线趋势：↓（下跌）。今日收盘跌-0.84%，振幅2.12%，成交量85.3亿单位，高于月均水平。MACD柱状图转负，RSI(14)约45，接近中性但偏弱，量价背离显示资金谨慎。',
    newsAnalysis: '北京时间2025-11-18 00:00至今的重要新闻评估：AI巨头债务风险发酵，甲骨文评级遭下调；美联储鹰派信号延续，官员强调通胀压力；科技股资金流出加剧，资金向黄金、债券迁移。AI泡沫担忧与货币政策压力叠加，消息面显著偏空。',
    keySupport: 22560,
    keyResistance: 23045,
    shortTermTrend: '↓',
    volumeInterpretation: '成交量85.3亿单位，高于月均水平，量价背离显示资金谨慎',
    probUpTechnical: 40.0,
    probDownTechnical: 60.0,
    probUpNews: 30.0,
    probDownNews: 70.0,
    probUpCombined: 35.0,
    probDownCombined: 65.0,
    modelName: 'AI Market Predictor v2.0',
    generatedTime: '2025-11-18 15:53',
    topNews: [
      { title: 'AI巨头债务风险发酵', score: 5 },
      { title: '美联储鹰派信号延续', score: 1 },
      { title: '科技股资金流出加剧', score: 2 }
    ]
  }
])

const probabilityTable = ref([
  {
    index: 'HSTECH',
    p1: 10.0,
    p2: 25.0,
    p3: 5.0,
    p4: 30.0,
    p5: 30.0
  },
  {
    index: 'IXIC',
    p1: 5.0,
    p2: 30.0,
    p3: 10.0,
    p4: 35.0,
    p5: 20.0
  }
])
</script>

<style scoped>
.market-page {
  background: linear-gradient(to bottom right, #050505, #0a0a0a, #0d0d0d);
  position: relative;
}
</style>
